<template>
	<view class="content" :style="{ background: indexSet.quse_css }">
		<swiper :style="{ background: indexSet.quse_css }" class="swpBox" circular="true" vertical="true"
			autoplay="true" interval="3000" duration="1000">
			<swiper-item v-for="(item, index) in noticeList" :key="index">
				<navigator hover-class="none" :url="'/pages/index/note?id=' + item.id">
					<view class="noteBox">
						<image src="../../static/gg.png" mode="widthFix"></image>
						{{ item.title }}
					</view>
				</navigator>
			</swiper-item>
		</swiper>
		<view class="topBox">
			<image :src="logo" mode="widthFix" class="logo"></image>
			<view class="title">{{ uesrData.purifier_model }}</view>
		</view>
		<image :src="indexSet.back_logo" mode="widthFix" class="blimg"></image>
		<!-- <image src="../../static/bl2.png" mode="widthFix" class="blimg"></image> -->

		<view class="mainBox">
			<view class="mtit">滤芯状态</view>
			<view class="mains" v-for="(item, index) in list" :key="index">
				<view class="no">{{ index + 1 }}</view>
				<view class="contBox" @click="open(item.start_time, item.expiration_time, item.expiration_date)">
					<view class="cate_name">{{ item.cate_name }}</view>
					<view class="time">
						预计剩余天数
						<text>{{ item.residue_time }}</text>
						天
					</view>
					<progress border-radius="80" active="true" :show-info="true" :percent="item.percentage"
						activeColor="#00aa00" stroke-width="3" />
				</view>
				<view class="btn" @click="CKreset(item.id)">重置</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center" :animation="true">
			<view class="popBox">
				<view>
					上次更换时间:
					<text>{{ pop1 }}</text>
				</view>
				<view>
					滤芯寿命:
					<text>{{ pop2 }}</text>
					天
				</view>
				<view>
					到期时间:
					<text>{{ pop3 }}</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logo: '',
				title: '800g反渗透净水器',
				noticeList: [],
				key: '',
				list: [],
				indexSet: '',
				uesrData: '',
				pop1: '',
				pop2: '',
				pop3: ''
			};
		},
		onLoad() {},
		onShow() {
			this.API_indexSet();
			this.API_login();
		},
		onShareTimeline() {
			return {
				title: '西岭小雪净水',
				query: {
					key: ''
				},
				imageUrl: ''
			}
		},
		onShareAppMessage() {
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			})
		},
		methods: {
			API_indexSet() {
				var that = this;
				that.ran.request('index/Index/indexSet', {}).then(res => {
					if (res.code == 0) {
						that.indexSet = res.data;
					}
				});
			},
			API_login() {
				var that = this;
				uni.login({
					provider: 'weixin', //使用微信登录
					success: function(loginRes) {
						console.log('loginRes', loginRes.code);
						that.ran
							.request('index/Wxchat/index', {
								code: loginRes.code
							})
							.then(res => {
								if (res.code == 0) {
									uni.setStorageSync('user_id', res.data.id);
									setTimeout(function() {
										that.API_noticeList();
										that.API_Logo();
										that.API_index();
										that.API_uesr();
									}, 100);
								} else {
									uni.setStorageSync('openid', res.data.openid);
									console.log('res.data.openid', res.data.openid);
									uni.redirectTo({
										url: '/pages/login/index?openid=' + res.data.openid
									});
								}
							});
					}
				});
			},
			CKreset(id, time) {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否已经更换该级滤芯？',
					success: function(res) {
						if (res.confirm) {
							uni.requestSubscribeMessage({
								tmplIds: ['iJP4_7gTz2fkyHFj2klVlPvym5x3a4Y_Zgpbe_G7sbw'],
								success(res) {
									that.API_reset(id);
								}
							});
						} else if (res.cancel) {
							// that.API_reset(id);
						}
					}
				});
			},
			API_reset(id) {
				var that = this;
				that.ran
					.request('index/Index/reset', {
						id: id
					})
					.then(res => {
						if (res.code == 0) {
							uni.showToast({
								title: '重置成功',
								icon: 'success'
							});
							that.API_index();
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					});
			},
			API_noticeList() {
				var that = this;
				that.ran.request('index/Index/noticeList', {}).then(res => {
					if (res.code == 0) {
						that.noticeList = res.data;
					}
				});
			},
			API_Logo() {
				var that = this;
				that.ran.request('index/Index/indexSet', {}).then(res => {
					if (res.code == 0) {
						that.logo = res.data.logo;
					}
				});
			},
			API_uesr() {
				this.ran.request('index/Index/user', {}).then(res => {
					if (res.code == 0) {
						this.uesrData = res.data;
					}
				});
			},
			API_index() {
				var that = this;
				that.ran.request('index/Index/index', {}).then(res => {
					if (res.code == 0) {
						that.list = res.data;
					}
				});
			},
			open(pop1, pop2, pop3) {
				this.pop1 = pop1;
				this.pop2 = pop2;
				this.pop3 = pop3;
				this.$refs.popup.open('top');
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #00d3f1;
	}

	.popBox {
		background: #fff;
		border-radius: 10rpx;
		width: 500rpx;
		// margin-top: 10rpx;
		// margin-top: calc(100vh - 95rpx);
		padding: 20rpx;
		margin: calc(50vh - 95rpx) auto;
		justify-items: center;

		view {
			line-height: 50rpx;

			text {
				padding: 0 10rpx;
				font-weight: bold;
			}
		}
	}

	.opct0 {
		opacity: 0;
	}

	.content {
		width: 750rpx;
		min-height: calc(100vh - 350rpx);
		// background: #00D3F1;
	}

	.mainBox {
		// background: #00D3F1;
		// padding: 0 20rpx;
		// border-top: 1rpx solid #f4f4f4;
		margin-top: 360rpx;

		.mtit {
			padding: 0 20rpx;
			line-height: 50rpx;
			font-size: 28rpx;
			color: #fff;
			border-bottom: 1rpx solid rgba(255, 255, 255, 0.5);
		}

		.mains {
			border-bottom: 1rpx solid rgba(255, 255, 255, 0.5);
			padding: 20rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.no {
				width: 50rpx;
				line-height: 50rpx;
				text-align: center;
				font-weight: bold;
				color: #00d3f1;
				background: #fff;
				border-radius: 50rpx;
			}

			.btn {
				padding: 0 24rpx;
				margin-left: 20rpx;
				float: right;
				background: #fff;
				border-radius: 40rpx;
				text-align: center;
				color: #00d3f1;
				font-size: 26rpx;
				line-height: 50rpx;
			}

			.contBox {
				width: 500rpx;
				padding: 0 20rpx;
				overflow: hidden;
				color: #fff;

				.cate_name {
					font-weight: bold;
					font-size: 30rpx;
				}

				.time {
					font-size: 26rpx;
					opacity: 0.9;
					margin-bottom: 10rpx;

					text {
						padding: 0 10rpx;
					}
				}
			}
		}
	}

	.swpBox {
		width: 750rpx;
		height: 100rpx;
		// position: fixed;
		// top: 30rpx;
		left: 0;
		z-index: 99999999;
		// background: rgba(0, 0, 0, 0.5);
		z-index: 9999999;

		// color: #fff;
		// margin-top: 350rpx;
		.noteBox {
			padding: 0 20rpx;
			display: block;
			overflow: hidden;
			display: flex;
			align-items: center;
			line-height: 100rpx;
			border-bottom: 1px solid #fff;
			background: #fff;

			image {
				width: 30rpx;
				float: left;
				margin-right: 10rpx;
			}

			view {
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}

	.blimg {
		width: 750rpx;
		display: block;
		position: absolute;
		top: 400rpx;
	}

	.topBox {
		width: 750rpx;
		height: 360rpx;
		background: #fff;
		position: absolute;
		top: 100rpx;

		.logo {
			width: 130rpx;
			padding: 30rpx 0 0;
			margin: 0 auto;
			display: block;
		}

		.title {
			font-size: 32rpx;
			color: #333;
			padding: 20rpx 0 10rpx;
			text-align: center;
			font-weight: bold;
			// color: #00D3F1;
		}
	}
</style>